<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="入库计划单">
            <el-input v-model="formInline.planSn" placeholder="请输入入库计划单" clearable />
          </el-form-item>
          <el-form-item label="计划入库日期">
            <datePickerRange v-model:start="formInline.startTime" v-model:end="formInline.endTime"></datePickerRange>
          </el-form-item>
          <el-form-item label="供应商">
            <selectSupplier v-model="formInline.supplierId"></selectSupplier>
          </el-form-item>
          <el-form-item label="入库状态">
            <el-select v-model="formInline.status" placeholder="请选择入库状态">
              <el-option v-for="item in counter.entryStatus" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="入库类型">
            <el-select v-model="formInline.type" placeholder="请选择入库类型">
              <el-option v-for="item in counter.receiptType" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查找</el-button>
            <el-button type="primary" @click="add" plain>新增</el-button>
            <el-button @click="init">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>

    <el-table :data="tableData.rows">
      <el-table-column prop="planSn" label="入库计划单" align="center" min-width="180">
        <template #default="scope">
          <el-button type="primary" text @click="proxy.$utils.toLink(`/inWarehouse/scheduleDetails?id=${scope.row.id}`)">{{scope.row.planSn}}</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="关联单据" /> -->
      <el-table-column prop="planDate" label="计划入库日期" align="center" min-width="150" />
      <el-table-column label="入库类型">
        <template #default="scope">
          {{counter.idString_format("receiptType",scope.row.type)}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          {{counter.idString_format("entryStatus",scope.row.status)}}
        </template>
      </el-table-column>
      <el-table-column prop="supplierName" label="供应商" align="center" min-width="150" />
      <el-table-column prop="totalWeight" label="总重量（KG）" align="center" min-width="150" />
      <el-table-column prop="totalSize" label="总体积（m³）" align="center" min-width="150" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="createBy" label="创建人" />
      <el-table-column prop="createTime" label="创建时间" align="center" width="200" />
      <el-table-column label="操作" align="center" fixed="right" width="250">
        <template #default="scope">
          <el-button type="primary" text @click="handClick(scope.row,1)">编辑</el-button>
          <el-button type="primary" text @click="handClick(scope.row,2)">取消</el-button>
          <el-dropdown v-if="false">
            <span class="el-dropdown-link">
              更多操作
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handClick(scope.row,1)">编辑</el-dropdown-item>
                <el-dropdown-item :disabled="scope.row.status!=1" @click="handClick(scope.row,2)">取消</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-if="tableData['total']" :total="tableData['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog v-model="dialogVisible" title="新增/编辑计划单" width="650px" :before-close="handleClose">
      <el-form :model="form" label-width="120" :rules="rules" ref="formEl">
        <el-form-item label="入库类型">
          <el-select v-model="form.type" placeholder="请选择入库类型">
            <el-option v-for="item in counter.receiptType" :key="item.value" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联调拨单" v-if="form.type==2" prop="transferSn">
          <selectTransfer v-model="form.transferSn" val="transferSn"></selectTransfer>
        </el-form-item>
        <el-form-item label=" 入库计划单" prop="planSn">
          <el-input v-model="form.planSn" placeholder="请输入入库计划单" clearable disabled />
        </el-form-item>
        <el-form-item label="计划入库日期" prop="planDate">
          <DatePicker v-model="form.planDate"></DatePicker>
        </el-form-item>
        <el-form-item label="供应商" prop="supplierId">
          <selectSupplier v-model="form.supplierId"></selectSupplier>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" :autosize="{ minRows: 4 }" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">
            确 认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
const route = useRoute();
//counter
import useCounterStore from "@/store/counter";
const counter = useCounterStore();
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();

const formInline = ref({
  pageNum: 1,
  pageSize: 10,
  planSn: "",
  status: "",
  type: "",
  supplierId: "",
  startTime: "",
  endTime: "",
});
let tableData = ref({});
let dialogVisible = ref(false);
let form = ref({
  type: "",
  planSn: "",
  transferSn: "",
  planDate: "",
  supplierId: "",
  remark: "",
});
let loading = ref(false);
let rules = ref({
  planSn: [
    {
      required: true,
      message: "请输入入库计划单",
      trigger: "blur",
    },
  ],
  planDate: [
    {
      required: true,
      message: "请选择入库日期",
      trigger: "blur",
    },
  ],
  supplierId: [
    {
      required: true,
      message: "请选择供应商",
      trigger: "blur",
    },
  ],
  transferSn: [
    {
      required: true,
      message: "请选择调拨单",
      trigger: "blur",
    },
  ],
});

onMounted(() => {
  if (route.query.planSn) {
    formInline.value.planSn = route.query.planSn;
  }
  search();
});

let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableData.value = await proxy.$apis.inPlanList(formInline.value);
};
let init = () => {
  formInline.value = {
    pageNum: 1,
    pageSize: 10,
    planSn: "",
    status: "",
    type: "",
    supplierId: "",
    startTime: "",
    endTime: "",
  };
  getInfo();
};
let handleClose = () => {
  form.value = {
    type: "",
    planSn: "",
    transferSn: "",
    planDate: "",
    supplierId: "",
    remark: "",
  };
  proxy.$refs.formEl.resetFields();
  getInfo();
  dialogVisible.value = false;
};
let submitForm = async () => {
  await proxy.$refs.formEl.validate((valid, fields) => {
    if (valid) {
      save();
    } else {
      for (let key in fields) {
        return proxy.$utils.showToast(fields[key][0].message, 0);
      }
    }
  });
};
let save = async () => {
  try {
    loading.value = true;
    if (form.value.id) {
      await proxy.$apis.inPlanEdit(form.value);
    } else {
      await proxy.$apis.inPlanAdd(form.value);
    }
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
let handClick = async (row, num: Number) => {
  switch (num) {
    case 1:
      form.value = proxy.$utils.formatFunction(row, { ...form.value });
      form.value.id = row.id;
      dialogVisible.value = true;
      break;
    case 2:
      let resp = await proxy.$utils.confirmTips(
        `是否确定取消入库计划单为 "${row.planSn}" 的数据`
      );
      if (!resp) return;
      await proxy.$apis.inPlanCancel({ id: row.id });
      proxy.$utils.showToast("取消成功");
      getInfo();
      break;
    default:
      break;
  }
};
let add = () => {
  form.value.planSn = `RK-${Date.now()}`;
  dialogVisible.value = true;
};
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;
}
</style>
